<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: red;
      display: none;
    }
  </style>
</head>
<body>
  <input type="button" value="显示" id="show"/>
  <input type="button" value="隐藏" id="hide"/>
  <input type="button" value="切换" id="toggle"/> <br/><br/>
  <div id="div1"></div>
</body>
</html>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    // show
   $('#show').click(function(){
    //有两个参数参数第一个：控制速度的
    // fast 200毫秒 
    // normal  400毫秒
    //  slow   600毫秒
    // callback里面可以写回调函数
    $('#div1').show("fast")
    // $('#div1').show(1000,function(){
    //   alert('我显示结束了，哈哈')
    // })
   })
  //  hide
  $('#hide').click(function(){
    $('#div1').hide("fast")
  })
  $('#toggle').click(function(){
    $('#div1').toggle()
  })

  });
</script>